<template>
	<view class="tbody" style="padding-top: 48rpx;">
		<view class="contribution">
			<rich-text style="word-wrap:break-word; word-break:break-all;" class="ql-editor" :nodes="content"></rich-text>
			<view class="u-page" style="margin-top: 200rpx;">
				<view class="u-demo-block">
					<view class="u-demo-block__content">
						<view class="album">
							<view class="album__content">
								<u-album :urls="urls2"></u-album>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 打分输入框 -->
		<view class="evaluate" v-if='keybl'>
			<input class="evaluate-grade" 
			disabled
			placeholder="暂无得分"
			 v-model="data.score" />
		</view>

		<view v-else>
			<!-- 打分输入框 -->
			<view class="evaluate">
				<input class="evaluate-grade" 
				placeholder='请输入得分'
				 v-model="data.score" />
			</view>
			<!-- 确定 -->
			<view class="affirm" v-if="state === '0'" @click="submit">
				确认
			</view>
			<view class="affirm" v-else @click="submit">
				重新打分
			</view>
		</view>
	</view>
</template>

<script>
	import {
		data
	} from '../../uni_modules/uview-ui/libs/mixin/mixin';
	export default {
		data() {
			return {
				key:uni.getStorageSync('roleKey'),
				content: '', //回显的贡献详情
				//贡献详情的id
				albumWidth: 0,
				urls2: [], // 图片展示，图片路径放这里就行了
				data: {
					score: '',
					id: '',
				},
				state:'0' //0是已经打分，1是未打分
			};
		},
		computed:{
			// 判断是不是管理员，是管理员就返回一个false
			keybl(){
				if(this.key === 'manager'){
					return false
				}else{
					return true
				}
			}
		},
		// 页面跳转携带过来的id
		onLoad(options) {
			// 赋值给准备好的变量
			this.data.id = Number(options.id)

		},
		onShow() {
			this.contribution()
		},
		methods: {
			// 调用接口回显
			async contribution() {
				this.urls2 = []
				const res = await uni.$http.get(`/business/contribution/${this.data.id}`)
				// 进行图片回显
				// 判断有没有返回图片
				if (res.data.images === null) {
					// 没有返回图片，不处理
				} else {
					// 先将返回的图片转数组，然后回显
					const url = this.$store.state.user.URL
					const images = res.data.images.split(',')
					images.forEach(item=>{			
						// const urls = url+item
						this.urls2.push(url+item)
					})
				}
				// 文本回显
				this.content = res.data.content
				 this.content = this.content.replace(/<\/p><p>/g, "   ");// 每段p标签中间加段空格
				// 贡献的状态，已经打分还是未打分
				this.state = res.data.state
				this.data.score = res.data.score
				if(this.state === '0'){
					this.disabled = '重新打分'
				}else{
					this.disabled = '打分'
				}
				
			},
			async submit() {
				console.log(this.data.score);
				const res = await uni.$http.put('/business/contribution/score', this.data)
				if (res.data.code == 200) {
					uni.showToast({
						title: '保存成功',
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}


			}
		}
	}
</script>

<style lang="scss" scoped>
	.album {
		@include flex;
		align-items: flex-start;

		&__avatar {
			background-color: $u-bg-color;
			padding: 5px;
			border-radius: 3px;
		}

		&__content {
			margin-left: 10px;
			flex: 1;
		}
	}

	.contribution {
		box-sizing: border-box;
		padding: 48rpx 32rpx 64rpx 32rpx;
		border-radius: 20rpx;
		min-height: 500rpx;
		width: 100%;
		background: #F5FDFF;
		box-shadow: 0px 0px 4rpx 0px #16C1DB;
		font-size: 24rpx;
		line-height: 36rpx;

		p {
			margin-bottom: 50rpx;
		}
	}

	::v-deep image {
		width: 192rpx !important;
		height: 192rpx !important;
		border-radius: 20rpx !important;
		// margin-bottom: 8rpx;
	}

	.evaluate {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-bottom: 96rpx;


		.evaluate-grade {
			width: 100%;
			height: 108rpx;
			border-radius: 20rpx;
			background: #F2FDFF;
			box-shadow: 0px 0px 4rpx 0px #16C1DB;

			font-size: 48rpx;
			font-weight: 400;
			line-height: 108rpx;
			color: rgba(22, 193, 219, 1);
			text-align: center;
			margin-top: 32rpx;
		}
	}

	.affirm {
		height: 88rpx;
		border-radius: 60rpx;
		background: #16C1DB;

		font-size: 32rpx;
		font-weight: 400;
		color: rgba(235, 252, 255, 1);
		text-align: center;
		line-height: 88rpx;
	}
</style>